<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('routes.table.departmentManagement.adjustPerson')"
    @register="register"
    @ok="handleSubmit"
    :destroyOnClose="true"
    :minHeight="300"
    :width="600"
  >
    <div style="display: flex; justify-content: center; align-items: center">
      <Transfer
        :titles="[
          t('routes.components.userModal.alternativeUser'),
          t('routes.components.userModal.selectedUser'),
        ]"
        :listStyle="{ width: '250px', height: '300px' }"
        :dataSource="unBingList"
        :targetKeys="bingList"
        :render="(item) => item.title"
        @change="handleChange"
      />
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Transfer } from 'ant-design-vue';
  import {
    GetOrgsChangePerson,
    ChangeOrgsPerson,
    GetRolesChangePerson,
    BindUserRole,
  } from '/@/api/demo/system';

  const emit = defineEmits(['success', 'register']);

  const { t } = useI18n();
  const { createMessage } = useMessage();
  const unBingList = ref<any>([]);
  const bingList = ref<any>([]);
  const DocTypeId = ref('');
  // 判断是部门还是角色
  const belongType = ref('');

  // 提交
  const handleSubmit = async () => {
    const filteredData = unBingList.value.filter((item) => bingList.value.includes(item.key));
    if (belongType.value === '部门') {
      const params = {
        allOrgPersonList: unBingList.value,
        orgPersonList: filteredData,
      };
      ChangeOrgsPerson(DocTypeId.value, params).then((res) => {
        if (res) {
          emit('success');
          createMessage.success(t('common.saveSuccess'));
          closeModal();
        }
      });
    } else if (belongType.value === '角色') {
      const params = {
        allRolePersonList: unBingList.value,
        rolePersonList: filteredData,
      };
      BindUserRole(DocTypeId.value, params).then((res) => {
        if (res) {
          emit('success');
          createMessage.success(t('common.saveSuccess'));
          closeModal();
        }
      });
    }
  };

  const handleChange = (nextTargetKeys: string[]) => {
    bingList.value = nextTargetKeys;
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    belongType.value = data.belongType;
    if (belongType.value === '部门') {
      DocTypeId.value = data.orgId;
      GetOrgsChangePerson(data.orgId).then((res) => {
        unBingList.value = res.allOrgPersonList === null ? [] : res.allOrgPersonList;
        bingList.value =
          res.orgPersonList === null ? [] : res.orgPersonList.map((item) => item.key);
      });
    } else if (belongType.value === '角色') {
      DocTypeId.value = data.orgId;
      GetRolesChangePerson(data.orgId).then((res) => {
        unBingList.value = res.allRolePersonList === null ? [] : res.allRolePersonList;
        bingList.value =
          res.rolePersonList === null ? [] : res.rolePersonList.map((item) => item.key);
      });
    }
  });
</script>
